<template>
    <div>
        <h1>成绩分析</h1>
        <el-row>
            <el-col :span="6" :offset="8">
                <el-input size="mini" v-model="stu_id"></el-input>
            </el-col>
            <el-col :span="4">
                <el-button size="mini" type="primary" plain @click="goanalysis">分析</el-button>
            </el-col>
        </el-row>
        <div class="echars">
            <el-row>
                <el-col :span="8">
                    <div id="main" style="width: 100%; height: 100%"></div>
                </el-col>
                <el-col :span="8">2</el-col>
                <el-col :span="8">3</el-col>
            </el-row>
            <el-row>
                <el-col :span="8">4</el-col>
                <el-col :span="8">5</el-col>
                <el-col :span="8">6</el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import {
  req_entry_grade,
  req_mid_grade,
  req_end_grade,
} from "@/api/analysis.js";
export default {
    data() {
        return {
            stu_id:''
        }
    },
    mounted() {
        this.onecharts()
    },
    methods: {
        async goanalysis(){
            let result_entry = await req_entry_grade(this.stu_id);
      let result_mid = await req_mid_grade(this.stu_id);
      let result_end = await req_end_grade(this.stu_id);
      console.log(result_entry.data, result_mid.data, result_end.data);
        },
        onecharts() {
            let myChart = this.$echarts.init(document.getElementById("main"));
            let option = {
                title: {
                    text: '成绩分析图'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    top: "10%",
                    data: ['入学', '期中', '期末']
                },
                grid: {
                    top: "25%",
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ["语文", "英语", "数学", "理综", "文综"],
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '入学',
                        type: 'line',
                        stack: 'Total',
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: '期中',
                        type: 'line',
                        stack: 'Total',
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name: '期末',
                        type: 'line',
                        stack: 'Total',
                        data: [150, 232, 201, 154, 190, 330, 410]
                    }
                ]
            };
            myChart.setOption(option);
            window.onresize = function () {
                myChart.resize();
            };
        }
    }
}
</script>

<style lang="scss" scoped>
.echars {
    div {
        height: 300px;
    }
}
</style>